<template>
      <!-- 底部部分 -->
    <footer class="footer">
      <span class="todo-count"><strong>{{AddSum}}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected:screenList === 'all'}" href="#/all" @click="screen('all')">全部</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:screenList === 'active'}" @click="screen('active')">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:screenList === 'completed'}" @click="screen('completed')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" v-show="AllListFlag"  @click="RemoveAllCompleted">清除已完成</button>
    </footer>
</template>

<script>
export default {
    props:{
      AddSum:{
        type:Number,
        required:true,
        default:0
      },
      AllListFlag:{
        type:Boolean,
        required:true,
      },
      screenList:{
        type:String,
        required:true,
      }
    },
    methods:{
      RemoveAllCompleted(){
      console.log(1);
      this.$emit('RemoveAllCompleted')
    },
    // 筛选按钮
    screen(flag){
      this.$emit('screen', flag)
    }
    }
}
</script>

<style>

</style>
